<template>
  <el-form size="small" ref="form" :model="form" :rules="rules" label-width="100px" label-position="right">
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="发货方" prop="shipper">
        <el-select style="width:200px" v-model="form.shipper" placeholder="发货方">
          <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="inline-block"  style="width:40%" label="所属项目" prop="projectName">
        <el-select style="width:200px" v-model="form.projectName" placeholder="所属项目">
          <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="收货方" prop="shipTo">
        <el-select style="width:200px" v-model="form.shipTo" placeholder="收货方">
          <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  class="inline-block" label="货主订单号"  prop="shipperOrderNumber">
        <el-input
          type="text"
          v-model="form.shipperOrderNumber"
          placeholder="货主订单号"
          style="width:200px"
        />
      </el-form-item>
    </div>
    <div>
      <el-form-item  class="inline-block" label="始发地"  prop="origin">
        <el-select style="width:200px" v-model="form.origin" placeholder="始发地">
          <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  class="inline-block ml10" label="" label-width="0">
        <el-input
          type="text"
          v-model="form.detailedAddress"
          placeholder="详细地址"
          style="width:200px"
        />
      </el-form-item>
    </div>
    <div>
      <el-form-item  class="inline-block" label="目的地"  prop="destination">
        <el-select style="width:200px" v-model="form.destination" placeholder="目的地">
          <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  class="inline-block ml10" label="" label-width="0">
        <el-input
          type="text"
          v-model="form.detailedAddress"
          placeholder="详细地址"
          style="width:200px"
        />
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block" style="width:40%" label="计划发车时间">
        <el-date-picker
          style="width:200px"
          v-model="form.plannedDepartureTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="计划发车时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="inline-block" label="计划到达时间">
        <el-date-picker
          style="width:200px"
          v-model="form.PlannedArrivalTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="计划到达时间">
        </el-date-picker>
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block" style="width:40%" label="预约提货时间">
        <el-date-picker
          style="width:200px"
          v-model="form.appointmentForPickupTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="预约提货时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="inline-block" label="预约送货时间">
        <el-date-picker
          style="width:200px"
          v-model="form.appointmentForDeliveryTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="预约送货时间">
        </el-date-picker>
      </el-form-item>
    </div>
    <el-form-item label="订单附件">
      <UploadImage
        class="ml5"
        title="订单附件"
        :size="10"
      />
      <UploadImage
        class="ml5"
        title="合同附件"
        :size="10"
      />
      <UploadImage
        class="ml5"
        title="发票附件"
        :size="10"
      />
    </el-form-item>
    <el-form-item label="其他材料">
      <UploadFile
        :data="{}"
        :size="10"
        :limit="5"
      >
      </UploadFile>
    </el-form-item>
    <GoodsTable :data="form.goodsList"></GoodsTable>
    <el-form-item label="发货网点">
      <el-select style="width:200px" v-model="form.shippingBranch" placeholder="发货网点">
        <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="紧急程度">
      <el-radio-group v-model="form.urgency">
        <el-radio :label="3">正常</el-radio>
        <el-radio :label="6">加急</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="发货提货方式">
      <el-select style="width:200px" v-model="form.shippingAndPickupMethod" placeholder="发货提货方式">
        <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="到达提货方式">
      <el-select style="width:200px" v-model="form.arrivalPickupMethod" placeholder="到达提货方式">
        <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
    </el-form-item>
    <div>
      <el-form-item class="inline-block" label="相关服务">
        <el-checkbox-group v-model="form.relatedServices">
          <el-checkbox label="a">仓储服务</el-checkbox>
          <el-checkbox label="b">装货服务</el-checkbox>
          <el-checkbox label="c">卸货服务</el-checkbox>
          <el-checkbox label="d">保价服务</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item  class="inline-block ml10" label="" label-width="0">
        <el-input
          type="text"
          v-model="form.valueStatement"
          placeholder="价值声明"
          style="width:100px"
        />
      </el-form-item>
    </div>
    <el-form-item label="备注" prop="desc">
      <el-input style="width:600px" type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { validEmail } from "@/utils/validate"
import UploadImage from '@/components/UploadImage/uploadImage.vue';
import UploadFile from '@/components/UploadFile';
import GoodsTable from './goodsTable.vue'
export default {
  name: "basic",
  components: {
    UploadImage,
    UploadFile,
    GoodsTable
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      form: this.data,
      rules: {
        shipper: [
          { required: true, message: "发货方不能为空", trigger: "change" },
        ],
        shipTo: [
          { required: true, message: "收货方不能为空", trigger: "change" },
        ],
        projectName: [
          { required: true, message: "所属项目不能为空", trigger: "blur" },
        ],
        shipperOrderNumber: [
          { required: true, message: "货主订单号不能为空", trigger: "blur" },
        ],
        origin: [
          { required: true, message: "始发地不能为空", trigger: "change" },
        ],
        destination: [
          { required: true, message: "目的地不能为空", trigger: "change" },
        ],
        iDCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
        ],
        customerNature: [
          { required: true, message: "客户性质不能为空", trigger: "change" },
        ],
        industry: [
          { required: true, message: "所属行业不能为空", trigger: "change" },
        ],
        postalCode: [{ required: false, message: "邮政编码不能为空", trigger: 'blur' }],
        businessAddress: [{ required: true, message: "所在地址不能为空", trigger: 'change' }],
        mailAddress: [{ required: true, message: "通讯地址不能为空", trigger: 'change' }],
        contacts: [{ required: true, message: "联系人不能为空", trigger: 'blur' }],
        post: [{ required: false, message: "职务不能为空", trigger: 'blur' }],
        email: [
          {
            validator:  (rule, value, callback) => {
              if (!value) {
                callback();
              } else if (!validEmail(value)) {
                callback(new Error('电子邮箱格式错误'));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        telephone: [
          { required: true, trigger: "blur", message: "联系电话不能为空" },
          {
            pattern: /^1[3-9]\d{9}$/, message: '联系电话格式错误', trigger: 'blur'
          }
        ],
        relatedAccessories: [
          { required: false, message: "相关附件不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
  },
  methods: {
    async handleValidate() {
      return new Promise((resolve) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        });
      })
    },
    limitInput(value,name) {
      this.form[name] = ('' + value) // 第一步：转成字符串
            .replace(/[^\d]/g, "") // 只能输入数字
            .replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
    },
    // 小数点后2个0
    limitInput_00(value,name) {
      this.form[name] = ('' + value) // 第一步：转成字符串
        .replace(/^\./g, '')  //第一个字符不能是.
        .replace(/\.{2,}/g, '.') // 不能连续输入.
        .replace(/(\.\d+)\./g, '$1') // .后面不能再输入.
        .replace(/^0+(\d)/, '$1') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/(\d{15})\d*/, '$1') // 最多保留15位整数
        .replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
